<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<navigation-link v-slot="{url}">
				这里填的，优先级比默认值高，体现插槽的作用
				<br />
				<span :style="{fontSize : 30+'px'}">
					your profile
				</span>
				{{url}}
				</navigation-link>

				<base-layout> <template v-slot:header>
						<h1>Here might be a page title</h1>
					</template>

					<p>A paragraph for the main content.</p>
					<p>And another one.</p>

					<template v-slot:footer>
						<p>Here's some contact info</p>
					</template>
				</base-layout>
				{{message}}
				
				<hr >
				
			
			<!-- 动态组件 -->
				<button @click="showA">显示A</button>
				<button @click="showB">显示B。</button>
					<keep-alive>
				<component :is="curCom"></component>
				</keep-alive>
		</div>
		<!-- js最后引入-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let comA={
				template:`
				<div>
				<input type="Text">
				</div>
				`
			}
			let comB={
				template:`
				<div>
				我是组件B
				</div>
				`
			}
			let navigationLink = {
				data() {
					return {
						url: 'http://www.baidu.com'
					}
				},
				template: `
				<a
				  v-bind:href="url"
				>
				  <slot :url='url'>默认值</slot>
				</a>
				`

			}
			let baseLayout = {
				template: `
					<div class="container">
					  <header>
					    <slot name="header"></slot>
					  </header>
					  <main>
					    <slot></slot>
					  </main>
					  <footer>
					    <slot name="footer"></slot>
					  </footer>
					</div>
					`

			}
			let app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!',
					curCom: 'com-a'
				},
				components: {
					'navigation-link': navigationLink,
					'base-layout': baseLayout,
					'com-a': comA,
					'com-b': comB,
				},
				methods:{
					showA:function(){
						this.curCom='com-a'
					},
					showB:function(){
						this.curCom='com-b'
					},
				}
			});
		</script>
	</body>
</html>
